<%--
  Created by IntelliJ IDEA.
  User: 陈海彬
  Date: 2023/9/25
  Time: 19:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>平调审核</title>
    <link rel="stylesheet" href="../../static/css/element-ui.css">
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/js/axios.min.js"></script>
    <script src="../../static/js/element_index.js"></script>
</head>
<body>
<div id="app">
    <div v-if="total>0" class="container">
        <%--表格组件--%>
        <el-table
                :data="librayTransferVoList"
                :cell-style="{'text-align':'center'}"
                :header-cell-style="{'text-align':'center'}"
                border
                style="width: 100%">
            <el-table-column fixed prop="cid" label="出库编号" show-overflow-tooltip width="90"></el-table-column>
            <el-table-column prop="checkoutPerson" label="出库人" show-overflow-tooltip width="90"></el-table-column>
            <el-table-column prop="outLibrayTransfer.outtime" label="出库时间" show-overflow-tooltip
                             width="200"></el-table-column>
            <el-table-column label="出库方式" show-overflow-tooltip width="100">
                <template slot-scope="scope">
                    <el-tag hit type="warning" effect="dark">{{ scope.row.outLibrayTransfer.outmethod == 3?'平调出库':''
                        }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="审核状态" width="100">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.outLibrayTransfer.examstate ==
                    1?'warning':scope.row.outLibrayTransfer.examstate == 2?'success':'danger'" effect="dark">{{
                        scope.row.outLibrayTransfer.examstate ==
                        1?'待审核':scope.row.outLibrayTransfer.examstate == 2?'审核通过':'审核驳回' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="branchName" label="原始分店" show-overflow-tooltip width="140"></el-table-column>
            <el-table-column prop="newBranchName" label="平调分店" show-overflow-tooltip width="140"></el-table-column>
            <el-table-column label="详情" width="120">
                <template slot-scope="scope">
                    <el-button @click="getDetailsByCid(scope.row.cid)" size="mini" type="primary">详细信息</el-button>
                </template>
            </el-table-column>
            <el-table-column label="详情" flex="right">
                <template slot-scope="scope" v-if="scope.row.outLibrayTransfer.examstate == 1">
                    <el-button @click="approved(scope.row.cid)" size="mini" type="primary">通过</el-button>
                    <el-button @click="rejection(scope.row.cid)" size="mini" type="danger">驳回</el-button>
                </template>
            </el-table-column>
        </el-table>
        <%--分页组件--%>
        <el-pagination
                @size-change="outLibraySizeChange"
                @current-change="outLibrayCurrentChange"
                :current-page="page"
                :page-sizes="[5, 10, 15,20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
    <el-empty v-else description="该门店暂无数据"></el-empty>


    <%--详细信息弹出层--%>
    <el-dialog
            title="详细信息"
            :visible.sync="detailsVisible"
            width="80%">
        <el-table
                :cell-style="{'text-align':'center'}"
                :header-cell-style="{'text-align':'center'}"
                :data="detailList"
                stripe
                style="width: 100%">
            <el-table-column prop="xid" label="出库详情ID" show-overflow-tooltip></el-table-column>
            <el-table-column prop="goods.goodsname" show-overflow-tooltip label="商品名"></el-table-column>
            <el-table-column prop="num" label="出库数量"></el-table-column>
            <el-table-column prop="goods.sprice" show-overflow-tooltip label="售价"></el-table-column>
            <el-table-column prop="total" show-overflow-tooltip label="总价"></el-table-column>
        </el-table>
        <el-pagination
                @size-change="detailSizeChange"
                @current-change="detailCurrentChange"
                :current-page="detailPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="detailPageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="detailTotal">
        </el-pagination>
    </el-dialog>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            page: 1,
            pageSize: 5,
            librayTransferVoList: [],
            total: 0,

            detailsVisible: false,

            /*详细信息数据*/
            detailPage: 1,
            detailPageSize: 5,
            detailTotal: 0,
            detailList: [],
            detailsVisible: false,//详细信息弹出层
            cid: 0,//详细信息的id
            status: 0,//审核的状态
            remarks: '',//审核的信息
        },
        created() {
            this.getHorizontalAudit();
        },
        methods: {
            getHorizontalAudit() {
                axios.get('/outLibrayTransfer/getHorizontalAudit', {
                    params: {
                        page: this.page,
                        pageSize: this.pageSize
                    }
                }).then(res => {
                    this.librayTransferVoList = res.data.data.rows;
                    this.total = res.data.data.total;
                })
            },
            /*平调信息显示最大值*/
            outLibraySizeChange(val) {
                this.pageSize = val;
                this.getHorizontalAudit();
            },
            /*平调信息切换当前页*/
            outLibrayCurrentChange(val) {
                this.page = val;
                this.getHorizontalAudit();
            },
            /*获取商品详细信息*/
            getDetailsByCid(cid) {
                this.cid = cid;
                this.detailsVisible = true;//修改弹出层状态
                axios.get('/outLibrayTransfer/getDetails', {
                    params: {
                        cid: cid,
                        page: this.detailPage,
                        pageSize: this.detailPageSize,
                    }
                }).then(res => {
                    this.detailList = res.data.data.rows;
                    this.detailTotal = res.data.data.total;
                })
            },
            /*商品详细信息最大数*/
            detailSizeChange(val) {
                this.detailPageSize = val;
                this.getDetailsByCid(this.cid);
            },
            detailCurrentChange(val) {
                this.detailPage = val;
                this.getDetailsByCid(this.cid);
            },
            /*通过审核*/
            approved(cid) {
                axios.post('/outLibrayTransfer/updateOutLibrayTransfer/', {
                    cid: cid,
                    status: 1,
                    remarks: this.remarks
                }).then(res => {
                    if (res.data.code === 202) {
                        this.$message(res.data.msg);
                    } else if (res.data.code === 200) {
                        this.$message({
                            message: '平调成功！',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('平调失败，请联系管理员解决问题');
                    }
                    this.getHorizontalAudit();
                })
            },
            /*驳回审核*/
            rejection(cid) {
                this.$prompt('请输入驳回原因', '', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(({value}) => {
                    axios.post('/outLibrayTransfer/updateOutLibrayTransfer/', {
                        cid: cid,
                        status: 2,
                        remarks: value
                    }).then(res => {
                        if (res.data.code === 200) {
                            this.$message({
                                message: '驳回成功！',
                                type: 'success'
                            });
                        } else {
                            this.$message.error('驳回失败，请联系管理员解决问题');
                        }
                        this.getHorizontalAudit();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消驳回操作'
                    });
                });
            }
        }
    })
</script>
</body>
</html>
